<template>
  <div class="page-content" style="width: 1000px;">
    <yz-condition-filter
      v-model="queryParams"
      @resetSearch="resetSearch"
      @onSubmit="onSubmit"
    >
      <yz-input
        v-model.trim="queryParams.fileName"
        class="q-mr-sm"
        :maxlength="20"
        title="文件名"
      ></yz-input>
      <yz-input
        v-model.trim="queryParams.content"
        class="q-mr-sm"
        :maxlength="20"
        title="操作内容"
      ></yz-input>
      <yz-input
        v-model.trim="queryParams.ownerName"
        class="q-mr-sm"
        :maxlength="20"
        title="操作人"
      ></yz-input>
      <yz-input
          v-model.trim="queryParams.date"
          class="q-mr-sm q-mb-sm"
          inputType="date"
          title="操作时间"
      ></yz-input>
    </yz-condition-filter>
    <div class="page-content" style="height: 400px">
      <q-table
        :data="tableData"
        :columns="columns"
        row-key="id"
        :pagination="{ rowsPerPage: 0 }"
        class="myTable scroll"
        :loading="isTableLoading"
        :hide-bottom="tableData.length > 0"
        no-data-label="暂无数据"
        color="primary"
      >
        <template v-slot:body-cell-fileName="props">
          <q-td>
            <div>{{ props.row.fileName }}</div>
            <div>{{ sizeFormat(props.row.fileSize) ? sizeFormat(props.row.fileSize) : '' }}</div>
          </q-td>
        </template>
      </q-table>
      <yz-pagination v-model="pagination" @onSearch="getList"/>
    </div>
  </div>
</template>
<script>
import { getFileLogList } from '../../../boot/program-v2/machine'
import _ from 'lodash'
import { sizeFormat } from '../../../assets/js/util'
export default {
  name: 'operation-log',
  data () {
    return {
      queryParams: {
        date: [],
        fileName: '',
        content: '',
        ownerName: ''
      },
      // 表格分页配置
      pagination: {
        pageNum: 1, // 当前页码
        pageSize: 15, // 每页条数
        rowsNumber: 0 // 总条数
      },
      tableData: [],
      isTableLoading: false,
      columns: [
        { name: 'index', label: '序号', align: 'left', field: 'index' },
        {
          name: 'fileName',
          label: '文件名',
          align: 'left',
          field: 'fileName'
        },
        {
          name: 'onDevice',
          label: '所在设备',
          align: 'left',
          field: 'onDevice'
        },
        {
          name: 'filePath',
          label: '文件路径',
          align: 'left',
          field: 'filePath'
        },
        {
          name: 'createTime',
          label: '操作时间',
          align: 'left',
          field: 'createTime'
        },
        {
          name: 'content',
          label: '操作内容',
          align: 'left',
          field: 'content'
        },
        {
          name: 'ownerName',
          label: '操作员',
          align: 'left',
          field: 'ownerName'
        }
      ]
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    sizeFormat,
    // 重置
    resetSearch () {
      Object.assign(this.queryParams, this.$options.data().queryParams)
    },
    // 查询
    onSubmit () {
      this.getList()
    },
    async getList () {
      this.isTableLoading = true
      let [ startDate, endDate ] = this.$utils.setDateOSI(this.queryParams.date, true, 'YYYY-MM-DD')
      const params = {
        startDate,
        endDate,
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize,
        ...this.queryParams
      }
      const res = await getFileLogList(_.omit(params, ['date']))
      this.isTableLoading = false
      const ret = res.data
      this.pagination.rowsNumber = ret.total
      this.tableData = ret?.list?.map((v, index) => {
        return {
          ...v,
          index: index + 1
        }
      }) ?? []
    }
  }
}
</script>
<style lang="scss"></style>
